<template>
  <div class="alSensing-equipment">
    <div class="title blueTitleStyle">物联感知设备</div>
    <div class="main">
      <div class="main-btn centerbox">
        <el-button type="primary" @click="changeInfo('消防')" :class="{active:btnName==='消防'}">消防</el-button>
        <el-button type="primary" @click="changeInfo('安防')" :class="{active:btnName==='安防'}">安防</el-button>
        <el-button type="primary" @click="changeInfo('环境')" :class="{active:btnName==='环境'}">环境</el-button>
      </div>
      <div class="main-content centerbox">
        <div class="left">
          <div class="item-one">
            <div class="centerbox">
              <img  src="../../../../assets/img/AuxiliaryMonitor/icon/alarm_1.png" alt="设备总数" />
            </div>
            <div class="centerbox">
              <img src="../../../../assets/img/AuxiliaryMonitor/icon/alarm_2.png" alt="告警数" />
            </div>
            <div class="centerbox">
              <img src="../../../../assets/img/AuxiliaryMonitor/icon/alarm_3.png" alt="正常数" />
            </div>
          </div>
          <div class="item-two">
            <div class="centerbox">
              <span>设备总数：</span>
            </div>
            <div class="centerbox">
              <span>告警数：</span>
            </div>
            <div class="centerbox">
              <span>正常数：</span>
            </div>
          </div>
          <div class="item-three">
            <div class="centerbox">
              <span>{{activeData.totalNumberDevices}}</span>
            </div>
            <div class="centerbox">
              <span>{{activeData.alarmNumber}}</span>
            </div>
            <div class="centerbox">
              <span>{{activeData.numberNormal}}</span>
            </div>
          </div>
        </div>
        <div class="right">
          <warnPie :chartData="activeData" />
        </div>
      </div>
    </div>
    <!-- <Nodata v-else class="nodata"/> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import warnPie from "../../components/warnPie/index.vue";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import Nodata from "../../../../components/Nodata/index.vue";
interface activeListType {
  name?: string;
  totalNumberDevices?: number | undefined;
  alarmNumber?: number | undefined;
  numberNormal?: number | undefined;
}
interface pieDataType {
  name: string;
  value: number | undefined;
}
@Component({
  components: { warnPie,Nodata },
})
export default class extends Vue {
  public btnName: string = "消防";
  public activeList: activeListType[] = [
    {
      name: "消防",
      totalNumberDevices: 0,
      alarmNumber: 0,
      numberNormal: 0,
    },
    {
      name: "安防",
      totalNumberDevices: 0,
      alarmNumber: 0,
      numberNormal: 0,
    },
    {
      name: "环境",
      totalNumberDevices: 0,
      alarmNumber: 0,
      numberNormal: 0,
    },
  ];
  public activeData: activeListType = {};

  get deviceList() {
    var getterAllAuxiliaryByXtId = GetSocketModule.getterAllAuxiliaryByXtId || {};
    var list01 = getterAllAuxiliaryByXtId["01"] || []; //消防
    var list02 = getterAllAuxiliaryByXtId["02"] || []; //安防
    var list04 = getterAllAuxiliaryByXtId["04"] || []; //环境

    let obj = {};
    function getDeviceData(dwList: any[]) {
      let totalObj = {};
      var deviceData = {
        totalNumberDevices: 0,
        alarmNumber: 0,
        numberNormal: 0,
      };
      // 把点位数组循环一遍，筛选出告警的设备id和非告警的设备id
      dwList.map((k, j) => {
        totalObj[k.deviceId] = totalObj[k.deviceId] || "fgj";
        if (k.isGj === "gj") {
          totalObj[k.deviceId] = "gj";
        }
      });
      // 把设备id告不告警的数组循环一遍，拿到三个数
      for (let key in totalObj) {
        deviceData.totalNumberDevices++;
        if (totalObj[key] === "gj") {
          deviceData.alarmNumber++;
        } else if (totalObj[key] === "fgj") {
          deviceData.numberNormal++;
        }
      }
      return deviceData;
    }
    obj = {
      消防: getDeviceData(list01) || {},
      安防: getDeviceData(list02) || {},
      环境: getDeviceData(list04) || {},
    };
    return obj;
  }

  mounted(){
    this.changeInfo('消防')
  }

  public changeInfo(item: string): void {
    this.btnName = item;
    this.activeData = this.deviceList[item];
  }
}
</script>

<style lang="scss" scoped>
.alSensing-equipment {
  width: 100%;
  height: 100%;
  .title {
    height: 0.3rem;
  }
  .main {
    height: calc(100% - 0.3rem);
    &-btn {
      height: 0.24rem;
      margin: 0.08rem auto;
      box-sizing: border-box;
      .active {
        background: linear-gradient(
          360deg,
          rgba(20, 123, 252, 1) 0%,
          rgba(12, 157, 254, 1) 40%,
          rgba(3, 191, 255, 1) 100%
        );
      }
    }
    &-content {
      height: calc(100% - 0.4rem);
      display: flex;
      align-items: flex-end;
      .left {
        // background-color: palegreen;
        // flex: 1;
        width: 40%;
        height: 100%;
        display: flex;
        text-align: center;
        align-items: center;
        // place-content: flex-end flex-end;
        // flex-flow: column nowrap;
        // align-items: flex-end;
        // box-sizing: border-box;
        // padding-bottom: 10%;
        .item{
          &-one{
            width: 20%;
            height: 50%;
            // background-color: pink;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          }
          &-two{
            width: 45%;
            height: 50%;
            // background-color: yellowgreen;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-end;
            > div {
              white-space: nowrap;
            }
          }
          &-three{
            flex: 1;
            // width: 60%;
            height: 50%;
            // background-color: burlywood;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            > div {
              white-space: nowrap;
              display: inline-block;
              width: 0.6rem;
              overflow: hidden;
              text-overflow: ellipsis;
              text-align: left;
            }
          }
        }
        .big {
          font-size: 0.14rem;
          line-height: 0.24rem;
        }
      }
      .right {
        width: 55%;
        height: 100%;
        // background: burlywood;
      }
    }
    .nodata{
      height: calc(100% - 0.4rem);
    }
  }
}
</style>
<style lang="scss">
.alSensing-equipment {
  .el-tabs__content {
    height: calc(100% - 0.55rem);
  }
  .el-button--primary {
    height: 0.24rem;
  }
  .el-button {
    width: 0.8rem;
    height: 0.24rem;
  }
}
</style>